<template>
  <div>
    <div class="detail">
      <div class="detail_head">
        <div class="line"></div>
        <span>资产基本信息</span>
      </div>
      <div class="detailBox">
        <div class="box_head">
          <div class="boxTxt">
            <div class="box">卡名称：{{ baseInfo.name }}</div>
            <div class="box">卡类型：{{cardType}}</div>
            <div class="box">发行状态：{{ baseInfo.statusDict }}</div>
            <div class="box" v-if="baseInfo.validityType == 1">
              发行有效时间：{{ info.issueTime }} ~ 长期有效
            </div>
            <div class="box" v-if="baseInfo.validityType == 2">
              发行有效时间：{{ info.validityStartTime }} ~
              {{ info.validityEndTime }}
            </div>
            <div class="box" v-if="baseInfo.validityType == 3">
              发行有效时间：领取后{{ info.validityDay }}天有效
            </div>
            <div class="box">购卡金额（¥）：{{ baseInfo.buyMoney }}</div>
          </div>
          <div
            class="avatar-uploaderbox"
            v-loading="uploadLoding"
            v-if="cardType == '体验卡'"
          >
            <el-upload
              class="avatar-uploader"
              :action="action"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :on-progress="onProgress"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
      </div>
    </div>
    <div class="detail">
      <div class="detail_head">
        <div class="line"></div>
        <span>卡权益</span>
      </div>
      <div
        class="detailBox"
        style="font-size: 14px; color: #606266; padding: 14px 20px 14px"
        v-if="
          baseInfo.cardType == '计费卡' &&
          chargeDiscountDTOList.length == 0 &&
          chargeGiveDTOList.length == 0
        "
      >
        无附加权益
      </div>
      <div
        class="detailBox"
        v-if="
          baseInfo.cardType != '计费卡' &&
          chargeDiscountDTOList.length == 0 &&
          chargeGiveDTOList.length == 0
        "
      >
        <div class="boxTxt" v-if="basePowerMessages.length != 0">
          <div class="box" style="width: 100%">
            <span>基础权益：</span>
            <span v-for="(item, index) in basePowerMessages" :key="index"
              >{{ item }}；</span
            >
          </div>
          <div class="box" style="width: 100%">
            附加权益：
            <span v-for="(item, index) in attachPowerMessages" :key="index"
              >{{ item }}；</span
            >
          </div>
        </div>
        <div v-if="baseInfo.cardType == '计次卡'">
          <div
            class="jcty_card"
            v-for="(item, index) in detailInfo.assetCardNumberDetailDTOList"
            :key="index"
          >
            <span>{{ item.projectName }}</span>
            <span>可用次数：{{ item.projectNumber }}</span>
            <span>价值：{{ item.projectWorth }}元</span>
          </div>
        </div>
        <div v-if="baseInfo.cardType == '体验卡'">
          <div
            class="jcty_card"
            v-for="(item, index) in detailInfo.assetCardExperienceDetailDTOList"
            :key="index"
          >
            <span>{{ item.projectName }}</span>
            <span>可用次数：{{ item.projectNumber }}</span>
            <span>价值：{{ item.projectWorth }}元</span>
          </div>
        </div>
        <div
          v-if="
            baseInfo.cardType != '计费卡' &&
            basePowerMessages.length == 0 &&
            baseInfo.cardType != '体验卡' &&
            baseInfo.cardType != '计次卡'
          "
          style="font-size: 14px; color: #606266; padding: 0px 10px 14px"
        >
          无附加权益
        </div>
      </div>
      <div
        class="detailBox2"
        v-if="chargeDiscountDTOList.length > 0 && baseInfo.cardType == '计费卡'"
      >
        <div class="jf_interests_box">
          <div class="jf_title">每次消费打折</div>
          <div
            class="jf_interests_detail"
            v-for="(item, index) in chargeDiscountDTOList"
            :key="index"
          >
            <p>{{ item.powerName }}：</p>
            <span>{{ item.powerDescribe }}</span>
          </div>
        </div>
      </div>
      <div
        class="detailBox2"
        v-if="chargeGiveDTOList.length > 0 && baseInfo.cardType == '计费卡'"
      >
        <div
          class="jf_interests_box"
          v-if="
            chargeGiveDTOList.length == 1 &&
            chargeGiveDTOList[0].powerName == '赠送金额'
          "
        >
          <div class="jf_title">购卡赠送</div>
          <div
            class="jf_interests_detail"
            v-for="(item, index) in chargeGiveDTOList"
            :key="index"
          >
            <p>{{ item.powerName }}：</p>
            <span>{{ item.powerDescribe }}</span>
          </div>
        </div>
        <div
          class="jf_interests_detail"
          v-if="
            chargeGiveDTOList.length > 0 &&
            giveGoods.length == 0 &&
            chargeGiveDTOList[0].powerName != '赠送金额'
          "
        >
          <p>赠送物品：</p>
          <span
            style="margin-right: 4px"
            v-for="(item, index) in chargeGiveDTOList"
            :key="index"
            >{{ item.powerName }}：{{ item.powerDescribe }}；</span
          >
        </div>
        <div
          class="jf_interests_box"
          v-if="chargeGiveDTOList.length > 0 && giveGoods.length > 0"
        >
          <div class="jf_title">购卡赠送</div>
          <div
            class="jf_interests_detail"
            v-for="(item, index) in giveGoods"
            :key="index"
          >
            <p>{{ item.powerName }}：</p>
            <span>{{ item.powerDescribe }}</span>
          </div>
          <div class="jf_interests_detail">
            <p>赠送物品：</p>
            <span
              style="margin-right: 4px"
              v-for="(item, index) in chargeGiveDTOList"
              :key="index"
              >{{ item.powerName }}：{{ item.powerDescribe }}；</span
            >
          </div>
        </div>
        <p
          class="careful"
          v-if="
            (chargeGiveDTOList.length > 1 &&
              chargeGiveDTOList[0].powerName != '赠送金额') ||
            (chargeGiveDTOList.length == 1 &&
              chargeGiveDTOList[0].powerName != '赠送金额')
          "
        >
          注意：如果赠送物品 是购卡时一次性赠送给顾客，不支持分批赠送或分批核销
        </p>
      </div>
    </div>
    <div class="explain">
      <div class="explain_head">
        <div class="explain_head_l">
          <div class="line"></div>
          <span>卡说明</span>
        </div>
        <el-button
          type="primary"
          v-if="disabledOne && baseInfo.cardType == '体验卡'"
          @click="modify"
          >修改</el-button
        >
        <el-button type="warning" v-if="!disabledOne" @click="modifyIntroduced"
          >保存</el-button
        >
      </div>
      <div class="textarea_nav" >
          <div class="nav-item">
            <div class="round"></div>
            <span v-if="baseInfo.useLimit == 1">本卡记名，仅限本人使用</span>
            <span v-else-if="baseInfo.useLimit == 2">本卡不记名，可由任何符合条件的持卡人使用</span>
          </div>
          <div class="nav-item">
            <div class="round"></div>
            <span v-if="baseInfo.discountLimit == 1">本卡不可与其他优惠促销活动同时使用</span>
            <span v-else-if="baseInfo.discountLimit == 2">本卡可与其他优惠促销活动同时使用</span>
          </div>
      </div>
      <el-input
        type="textarea"
        :rows="6"
        placeholder="请输入内容"
        v-model="assetIntroduce"
        :disabled="disabledOne"
        maxlength="5000"
        show-word-limit
        v-if="baseInfo.cardType == '体验卡'"
      >
      </el-input>
      <el-input
        type="textarea"
        :rows="6"
        placeholder="请输入内容"
        v-model="assetIntroduce"
        :disabled="disabledOne"
        maxlength="5000"
        show-word-limit
        v-if="baseInfo.cardType != '体验卡'"
      >
      </el-input>
    </div>
    <div class="detail">
      <div class="detail_head">
        <div class="line"></div>
        <span>流通信息</span>
      </div>
      <div class="detailBox">
        <!-- <div class="statistics_left">
          <div class="statisticsBox">
            <div class="statisticsBox_L">今日券流出量</div>
            <div class="statisticsBox_R">{{ selectFlowUnit.outflow }}</div>
          </div>
          <div class="statisticsBox">
            <div class="statisticsBox_L">今日券回收量</div>
            <div class="statisticsBox_R">{{ selectFlowUnit.recycle }}</div>
          </div>
        </div> -->
        <div class="statistics_right">
          <div id="ichart" :style="{ height: '272px', width: '800px' }" />
          <!-- <div class="toupdatetime">更新时间：{{selectFlowUnit.endTime}}</div> -->
        </div>
      </div>
    </div>
    <div class="detail">
      <div class="detail_head">
        <div class="line"></div>
        <span>分红信息</span>
      </div>
      <div class="detailBox" style="display: block">
        <div class="assets_H">
          <el-form :inline="true" :model="integral" class="demo-form-inline">
            <el-form-item label="分红时间：">
              <!-- <el-date-picker
                v-model="integral.applyTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              > -->
              <el-date-picker
                v-model="date"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="assets_B">
          <ex-table
            ref="table"
            :loading="loading"
            :table-column="tableColumn"
            :table-data="tableData"
            @pageSizeChange="handleSizeChange"
            @currentPageChange="handleCurrentChange"
          >
            <template v-slot:operate="{ scope }">
              <el-button @click="lookDetail(scope.row.id)">立即处理</el-button>
            </template>
          </ex-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  cardDetail,
  merchantNumber,
  cardDividendStatistics,
  adminDict,
  mideIntroduced,
  updateCardCover,
} from "@/api/merchants";
import handlePageMixin from "@/mixins/handlePageMixin";
// import echarts from "echarts";
import * as echarts from 'echarts';

export default {
  name: "situation",
  props: {},
  mixins: [handlePageMixin],
  data() {
    return {
      cardType: "",
      loading: false,
      uploadLoding: false,
      datalist: [
        { value: 0, name: "已发卡", itemStyle: { color: "#02ACFE" } },
        { value: 0, name: "剩余量", itemStyle: { color: "#FF9300" } },
      ],
      date: [],
      integral: {
        startTime: "", //开始时间
        endTime: "", //结束时间
      },
      action: process.env.VUE_APP_BASE_API + "/common/v1/uploadFile",
      info: {},
      detailInfo: {},
      selectFlowUnit: {},
      integralId: "",
      merchantId: "",
      options: [],
      tableData: [],
      tableColumn: [
        { prop: "dividendDate", label: "分红时间" },
        { prop: "receivableMoney", label: "当月营收（¥）" },
        { prop: "dividendMoney", label: "当月分红（¥）", width: 180 },
        { prop: "pullNewMoney", label: "当月分佣（¥）" },
        { prop: "dividendPerson", label: "当月分红人数" },
      ],
      merchantNumber: "",
      numisShow: true,
      imageUrl: "",
      totalNum: 0,
      assetId: "",
      baseInfo: {}, //基本信息
      basePowerMessages: [], //基础权益
      attachPowerMessages: [], //附加权益
      cardCirculationInfo: {}, //流通信息
      chargeDiscountDTOList: [], //计费卡折扣权益
      chargeGiveDTOList: [], //计费卡赠送权益
      giveGoods: [],
      assetIntroduce: "", //卡说明
      disabledOne: true,
    };
  },
  mounted() {
    let query = this.$route.query;
    // this.integralId = query.integralId;
    this.merchantId = query.merchantId;
    this.assetId = query.assetId;
    this.getlinkagelist();
    this.getintegralInfo();
  },
  methods: {
    getlinkagelist() {
      //获取联动状态
      const params = {
        dictType: "merchant_linkage_status",
      };
      adminDict(params).then((res) => {
        var arr = [
          {
            id: "",
            value: "全部",
          },
        ];
        this.options = arr.concat(res.result[0].dictList);
      });
    },
    getintegralInfo() {
      const params = {
        assetId: this.assetId,
      };
      cardDetail(params).then((res) => {
        this.detailInfo = res.result;
        this.baseInfo = res.result.baseInfo;
        this.$emit("func", res.result.baseInfo.cardType);
        this.cardType = res.result.baseInfo.cardType
        console.log(this.cardType)
        this.imageUrl = res.result.baseInfo.individuationCardCover;
        this.assetIntroduce = res.result.baseInfo.assetIntroduce;
        this.basePowerMessages = res.result.basePowerMessages; //基础权益
        this.attachPowerMessages = res.result.attachPowerMessages;
        this.cardCirculationInfo = res.result.cardCirculationInfo;
        this.chargeGiveDTOList = res.result.chargeGiveDTOList;
        if (
          this.chargeGiveDTOList.length > 0 &&
          this.chargeGiveDTOList[0].powerName == "赠送金额" &&
          this.chargeGiveDTOList.length > 1
        ) {
          this.giveGoods = this.chargeGiveDTOList.splice(0, 1);
        }
        console.log("giveGoods", this.giveGoods);
        console.log(this.chargeGiveDTOList);
        this.chargeDiscountDTOList = res.result.chargeDiscountDTOList;
        this.datalist[0].value = this.cardCirculationInfo.used;
        this.datalist[1].value = this.cardCirculationInfo.usable;
        this.totalNum =
          this.cardCirculationInfo.used + this.cardCirculationInfo.usable;
        this.initChart();
        // this.getmerchantNumber();
        // this.getList();
      });
    },
    handleAvatarSuccess(res, file) {
      //updateCardCover上传卡封面
      this.imageUrl = res.result.url;
      const params = {
        assetId: this.baseInfo.assetId,
        individuationCardCover: this.imageUrl,
      };
      updateCardCover(params).then((res) => {
        this.$message({
          message: "上传成功",
          type: "success",
          duration: 1500,
        });
        this.uploadLoding = false;
        this.getintegralInfo();
      });
    },
    beforeAvatarUpload(file) {
      const format = ["image/jpeg", "image/jpg", "image/png"];
      if (!format) {
        this.$message.error("上传图片只能是 jpeg、jpg、png 格式!");
      }
      return format;
    },
    onProgress() {
      this.uploadLoding = true;
      setTimeout(() => {
        this.uploadLoding = false;
      }, 15000);
    },
    getmerchantNumber() {
      //获取资产联动商家数量
      const params = {
        assetId: this.info.assetId,
      };
      merchantNumber(params).then((res) => {
        this.merchantNumber = res.result;
      });
    },
    getList() {
      //分红信息
      const params = {
        ...this.pageOptions,
        ...this.integral,
        assetId: this.assetId,
        merchantId: this.merchantId,
      };
      this.loading = true;
      cardDividendStatistics(params)
        .then((res) => {
          const { total, records } = res.result;
          this.tableData = res.result.statistics;
          this.$refs.table.pageOptions.total = total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    search() {
      //搜索
      if (this.date.length == 0) {
        this.$message.error("请选择查询日期");
        return;
      }
      this.integral.startTime = this.date[0];
      this.integral.endTime = this.date[1];
      console.log(this.integral);
      this.pageOptions.pageNum = 1;
      this.getList();
    },
    reset() {
      this.date = [];
      this.pageOptions.pageNum = 1;
      this.getList();
    },
    modify() {
      this.disabledOne = false;
    },
    modifyIntroduced() {
      //修改卡说明（体验卡）
      let Base64 = require("js-base64").Base64;
      let assetIntroduce = Base64.encode(this.assetIntroduce);
      var params = {
        assetId: this.assetId,
        assetIntroduce: assetIntroduce,
      };
      mideIntroduced(params).then((res) => {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1500,
        });
        this.disabledOne = true;
        this.getintegralInfo();
      });
    },
    initChart() {
      var myChart = echarts.init(document.getElementById("ichart"));

      myChart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          //   right: "5%",
          //   left: "center",
          icon: "circle",
          itemWidth: 10,
          right: 20,
          top: 50,
          textStyle: {
            //文字的样式。
            color: "#5E6D84",
            fontSize: 16,
            padding: [
              5, // 上
              10, // 右
              5, // 下
              10, // 左
            ],
          },
          orient: "vertical",
          formatter: (name) => {
            let data = this.datalist;
            let total = 0;
            let target;
            for (let i = 0; i < data.length; i++) {
              total += data[i].value;
              if (data[i].name === name) {
                target = data[i].value;
              }
            }
            let arr = [
              "" +
                name +
                " | " +
                ((target / total) * 100).toFixed(0) +
                "%" +
                "   " +
                target,
            ];

            return arr.join("\n");
          },
        },
        series: [
          {
            // name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "15",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            label: {
              show: true,
              position: "center",
              textStyle: {
                fontSize: "20",
                fontFamily: "黑体",
                fontWeight: "bold",
                rich: {
                  d: {
                    fontSize: 30,
                    color: "#696969",
                  },
                  e: {
                    fontSize: 15,
                    color: "#696969",
                    lineHeight: 25,
                  },
                },
              },
              formatter: (params) => {
                // let data = this.datalist;
                let number = this.totalNum;
                // data.forEach((data) => {
                //   number += data.value;
                // });
                return ["{e|发行总量}\n" + "{d|" + number + "}"];
              },
            },
            data: this.datalist,
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.detail {
  margin-bottom: 20px;
}
.detail_head {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #303133;
}
.line {
  width: 2px;
  height: 12px;
  background: #1989fa;
  border-radius: 1px;
  margin-right: 4px;
}
.detailBox {
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  padding: 24px 20px 8px;
  margin-top: 16px;
  display: flex;
  align-items: center;
}
.detailBox2 {
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  padding: 24px 20px 8px;
  margin-top: 16px;
}
.box_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.boxTxt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex: 1;
}
.box {
  font-size: 14px;
  color: #606266;
  width: 50%;
  margin-bottom: 16px;
}
.statistics_left {
  width: auto;
}
.statisticsBox {
  display: flex;
  align-items: center;
  opacity: 1;
  background: #f6f8fb;
  border-radius: 4px;
  margin-bottom: 20px;
  min-width: 234px;
  height: 52px;
}
.statisticsBox_L {
  height: 32px;
  border-right: 1px solid #d2d2d2;
  font-size: 14px;
  color: #303030;
  text-align: center;
  line-height: 32px;
  padding: 0 16px;
}
.statisticsBox_R {
  font-size: 20px;
  color: #ff5800;
  font-weight: bold;
  text-align: center;
  line-height: 32px;
  padding: 0 34px;
}
.statistics_right {
  display: flex;
  align-items: center;
  position: relative;
}
.toupdatetime {
  color: #c0c4cc;
  font-size: 14px;
  position: absolute;
  right: 2%;
  bottom: 14%;
}
.linkageing {
  font-size: 14px;
  color: #303030;
  margin-bottom: 20px;
}
.jf_title {
  color: #606266;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 10px;
}
.jf_interests_detail {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
}
.jf_interests_detail p {
  min-width: 100px;
  text-align: right;
}
.careful {
  font-size: 12px;
  color: #ff5800;
  padding: 10px 30px 10px;
  line-height: 20px;
}
.jcty_card {
  font-size: 14px;
  color: #606266;
  margin-bottom: 12px;
}
.jcty_card span {
  margin-right: 20px;
}
.explain {
  margin-bottom: 20px;
}
.explain_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.explain_head_l {
  display: flex;
  align-items: center;
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff !important;
  border-color: #dfe4ed;
  color: #929191 !important;
  cursor: not-allowed;
}
.avatar-uploaderbox {
  border: 1px dashed #d9d9d9 !important;
  margin-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 128px;
  display: block;
}
.nav-item{
  margin-bottom: 10px;
  font-size: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.nav-item .round{
  width: 10px;
  height: 10px;
  background: orangered;
  border-radius: 50%;
  margin-right: 5px;
  margin-bottom: 3px;
}
</style>